<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%

	String schoolid = request.getParameter("schoolid");
	//获得学校信息
	TSchool school = DAOFactory.getSchoolDAO().getTSchool(schoolid);
	Expression exp = new Expression();
	exp.andEqu("schoolid", schoolid, String.class);
	String strWhere = exp.toString();
	List<VCloudSchoolAnecdoteStatis> schoolList = DAOFactory.getAnecdoteStatisDAO().getSchoolAnecdoteStatis(strWhere);
 %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学校轶事人数分布报告打印</title>
    <script type="text/javascript" src="../lib/echarts.common.min.js"></script>
    <script type="text/javascript" src="../lib/jquery/jquery-1.9.0.min.js"></script>
    <script src="../js/jsuntil/FileSaver.js"></script>
    <script src="../js/jsuntil/jquery.wordexport.js"></script>
     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style>
        body{
            font-family: 宋体;
            font-size: 12px;
            padding:10px 10px 40px 10px;
        }
        #baseInfo{
            list-style: none;
        }
        #baseInfo li{
            float: left;
            width: 200px;
        }
         table,tr,th{
            padding: 0;
            height: 28px;
            text-align:center;
        }
        table,tr,td{
            padding: 0;
            height: 28px;
            text-align:center;
        }
        .weidu{
            margin-top: 20px;
        }
        
        .MsoNormalTable{
            mso-style-name:普通表格;
            mso-style-parent:"";
            mso-style-noshow:yes;
            mso-tstyle-rowband-size:0;
            mso-tstyle-colband-size:0;
            mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;
            mso-para-margin:0pt;
            mso-para-margin-bottom:.0001pt;
            mso-pagination:widow-orphan;
            font-family:'Times New Roman';
            font-size:10.0000pt;
            mso-ansi-language:#0400;
            mso-fareast-language:#0400;
            mso-bidi-language:#0400;
        }
    </style>
</head>
<body>
    <button id="createWord" type="button" class="btn btn-default" onclick="createWord()">生成Word</button>
    <button id="printword" type="button" class="btn btn-default" onclick="toWord()">打印保存</button>
    <div id="export_word" style="margin:auto;width:90%;">
    <% 
		if(school!=null && !school.equals("")){
    %>
    <center><h2><%=school.getSchoolName() %>轶事人数分布报告</h2></center><br>
    <% 
    	}
    %>
    <div style="margin:auto;width:90%;">
    <div style="width:50%; float:left">
    
        <table class="layui-table" lay-data="{url:'../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>', cellMinWidth: 80}">
			<thead>
				<% 
					if(school!=null && !school.equals("") && schoolList.size()>0){
				%>
				<tr>
					<th lay-data="{align:'center'}" colspan="4"><%=school.getSchoolName() %>轶事人数分布报告</th>
				</tr>
				<tr>
					<th lay-data="{align:'center'}" colspan="2">学校：<%= school.getSchoolName() %></th>
					<th lay-data="{align:'center'}" colspan="2">人数： <%= schoolList.get(0).getStunumber() %></th>
				</tr>
				<% 
					}
				%>
				<tr>
					<th lay-data="{align:'center', field:'anecdotetypename'}">轶事类型</th>
					<th lay-data="{align:'center', field:'anecdotenumber'}">发生人数</th>
					<th lay-data="{align:'center', field:'rate'}">占比</th>
					<th lay-data="{align:'center', field:'perrate'}">所占百分比</th>
				</tr>
			</thead>
		</table>
        	
    </div>
    <div style="width:50%; float:left">
    	 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    	 <%
    	 	if(schoolList!=null && schoolList.size()>0){
				for(int i = 0; i < schoolList.size(); i++)
				{
		 %>
             <div id="anecdotetype<%= schoolList.get(i).getAnecdotetypeid() %>" style="width: 550px;height:300px; backgroud:red"></div>
             <img id="img<%= i %>" style="width: 550px;height:300px;display:none">
        <%
            	}
            }
        %>
    </div>
    </div>
    </div> 
    <script src="../layui/layui.js"></script>
    <script>
    layui.use(['form','table'], function(){
		var form = layui.form;
		var table = layui.table;
		
		$.ajax({
			url: '../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>',  
	        type: 'post', 
	        dataType: 'json', 
	        success: function (data) {
	        	if(data.code == 0){
	        		
	        		for(var i = 0; i < data.count; i++){
			
						var anecdotetypename = data.data[i].anecdotetypename;//打架名称
		        		var anecdotenumber = data.data[i].anecdotenumber;//打架人数
		        		var perrate = data.data[i].perrate;//打架的占比
		        		
		        		var disanecdotetypename = '正常';
		        		var disanecdotenumber = data.data[i].stunumber - data.data[i].anecdotenumber;
		        		var disperrate = ((1 - data.data[i].rate) * 100).toFixed(2) + '%';
		        		
		        		var categories = [ anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')', disanecdotetypename + ':' + disanecdotenumber + '(' + disperrate + ')' ];
		        		var values = [ {'name' : anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')', 'value' : anecdotenumber} , {'name' : disanecdotetypename + ':' + disanecdotenumber + '(' + disperrate + ')', 'value' : disanecdotenumber} ];
						// 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('anecdotetype' + data.data[i].anecdotetypeid));
				        
				        // 指定图表的配置项和数据
				        option = {
						    title : {
						        text: data.data[i].anecdotetypename,					       
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'right',
						        data: []
						    },
						    series : [
						        {
						            name: '访问来源',
						            type: 'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data:[],
						            itemStyle: {
						                emphasis: {
						                    shadowBlur: 10,
						                    shadowOffsetX: 0,
						                    shadowColor: 'rgba(0, 0, 0, 0.5)'
						                }
						            }
						        }
						    ],
						    animation:false
						};
						myChart.setOption(option); 
						myChart.setOption({
			         		title : {
					        	text: data.data[i].anecdotetypename,
					        	x:'center'
					    	},
				         	legend: {
					        	data: categories
					    	},
					    	series : [
					        {
					            data: values
					        }
					    	]
			         	});
			         	
			         	/* 将图表放在一张图片上 */
						createImg(i,myChart);
					
					}
	        	}
	        }
		});  
  
       
        
        var isvalidprint = false; //可保存但因状态
	
        $(function(){
        	if(isvalidprint == false){
        		$("#printword").attr('disabled',"true");//添加disabled属性 
        	}else{
        		$("#printword").removeAttr("disabled"); //移除disabled属性 
        	}
        });

		
    });
    
     function toWord(){
       	$("#export_word").wordExport("<%=school.getSchoolName()%>轶事统计分析结果");
     }

	function createImg(i,mychart){
     	//将myChart1中的报表复制到img1中
     	var img1 = mychart.getDataURL();
		$("#img"+i).attr('src', img1);
     }
	
    function createWord(){ 
    	alert("Word生成成功");
		isvalidprint = true; 
		$("#printword").removeAttr("disabled"); //移除disabled属性 
    }
    </script>
</body>
    
</html>